<%--
  Created by IntelliJ IDEA.
  User: MyUser
  Date: 2025/4/11
  Time: 12:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!-- 页面元信息 -->
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Bootstrap 5 CSS from jsDelivr CDN -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- Bootstrap图标库 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">

  <!-- 富文本编辑器CSS -->
  <link href="https://cdn.jsdelivr.net/npm/quill@2.0.0/dist/quill.snow.css" rel="stylesheet">

  <title>编辑帖子 - 社区论坛</title>

  <style>
    .avatar-sm {
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }
    /* 自定义样式 */
    body {
      background-color: #f8f9fa;
    }
    .edit-container {
      max-width: 800px;
      margin: 2rem auto;
      background: white;
      border-radius: 10px;
      box-shadow: 0 0 15px rgba(0,0,0,0.05);
      overflow: hidden;
      padding: 2rem;
    }
    .edit-header {
      margin-bottom: 2rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid #eee;
    }
    .tag-input-container {
      position: relative;
    }
    .tag-list {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-top: 0.5rem;
    }
    .tag-item {
      display: inline-flex;
      align-items: center;
      background-color: #e9ecef;
      padding: 0.25rem 0.75rem;
      border-radius: 20px;
      font-size: 0.875rem;
    }
    .tag-remove {
      margin-left: 0.5rem;
      cursor: pointer;
      color: #6c757d;
    }
    .tag-remove:hover {
      color: #dc3545;
    }
    .tag-suggestions {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: white;
      border: 1px solid #dee2e6;
      border-radius: 0 0 5px 5px;
      max-height: 200px;
      overflow-y: auto;
      z-index: 1000;
      display: none;
    }
    .tag-suggestion {
      padding: 0.5rem 1rem;
      cursor: pointer;
    }
    .tag-suggestion:hover {
      background-color: #f8f9fa;
    }
    .editor-container {
      height: 400px;
      margin-bottom: 1.5rem;
    }
    .form-actions {
      display: flex;
      justify-content: flex-end;
      gap: 1rem;
      margin-top: 2rem;
    }
    .image-upload-preview {
      max-width: 200px;
      max-height: 200px;
      margin-top: 1rem;
      display: none;
    }
    .upload-area {
      border: 2px dashed #dee2e6;
      border-radius: 5px;
      padding: 1.5rem;
      text-align: center;
      margin-bottom: 1rem;
      cursor: pointer;
    }
    .upload-area:hover {
      border-color: #adb5bd;
    }
  </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <div class="container">
    <a class="navbar-brand" href="#">广软课程论坛</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link active" href="index.jsp">首页</a>
        </li>
      </ul>
      <form class="d-flex me-2" action="/post/search" method="get">
        <input class="form-control me-2" type="search" name="keyword" placeholder="搜索帖子..." aria-label="Search">
        <button class="btn btn-outline-light" type="submit">搜索</button>
      </form>
      <div class="dropdown">
        <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser" data-bs-toggle="dropdown">
          <img src="https://img0.baidu.com/it/u=3985150573,583103601&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" alt="头像" class="avatar-sm me-2">
          <span></span>
        </a>
        <ul class="dropdown-menu dropdown-menu-end">
          <li><a class="dropdown-item" href="PersonInfo.jsp">个人中心</a></li>
          <li><a class="dropdown-item" href="AddNewPost.jsp">发布新帖</a></li>

          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="/admin/dashboard">管理后台</a></li>

          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="/logout">退出登录</a></li>
        </ul>
      </div>


      <a href="Login.jsp" class="btn btn-outline-light me-2">登录</a>
      <a href="Register.jsp" class="btn btn-light">注册</a>

    </div>
  </div>
</nav>

<!-- 编辑帖子内容 -->
<div class="container">
  <div class="edit-container">
    <div class="edit-header">
      <h2>编辑帖子</h2>
      <p class="text-muted">修改您的帖子内容，完成后点击保存按钮</p>
    </div>

    <form id="editPostForm">
      <!-- 标题 -->
      <div class="mb-4">
        <label for="postTitle" class="form-label">标题</label>
        <input type="text" class="form-control" id="postTitle" value="如何使用Bootstrap 5快速搭建响应式网站" required>
      </div>

      <!-- 标签 -->
      <div class="mb-4 tag-input-container">
        <label for="tagInput" class="form-label">标签</label>
        <input type="text" class="form-control" id="tagInput" placeholder="输入标签，按Enter添加">
        <div class="tag-list" id="tagList">
          <div class="tag-item">
            技术讨论
            <span class="tag-remove" onclick="removeTag(this)">&times;</span>
          </div>
          <div class="tag-item">
            Bootstrap
            <span class="tag-remove" onclick="removeTag(this)">&times;</span>
          </div>
        </div>
        <div class="tag-suggestions" id="tagSuggestions">
          <div class="tag-suggestion" onclick="selectTag('前端开发')">前端开发</div>
          <div class="tag-suggestion" onclick="selectTag('CSS框架')">CSS框架</div>
          <div class="tag-suggestion" onclick="selectTag('响应式设计')">响应式设计</div>
          <div class="tag-suggestion" onclick="selectTag('网页设计')">网页设计</div>
        </div>
      </div>

      <!-- 内容编辑器 -->
      <div class="mb-4">
        <label class="form-label">内容</label>
        <div id="editor" class="editor-container"></div>
        <input type="hidden" id="postContent" name="content">
      </div>


      <!-- 表单操作按钮 -->
      <div class="form-actions">
        <button type="button" class="btn btn-outline-secondary" onclick="window.history.back()">取消</button>
        <button type="button" class="btn btn-outline-danger" id="deleteBtn">删除帖子</button>
        <button type="submit" class="btn btn-primary">保存修改</button>
      </div>
    </form>
  </div>
</div>

<!-- 删除确认模态框 -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        您确定要删除这篇帖子吗？此操作无法撤销。
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-danger" id="confirmDelete">确认删除</button>
      </div>
    </div>
  </div>
</div>

<!-- Bootstrap 5 JS Bundle with Popper from jsDelivr CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- 富文本编辑器JS -->
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.0/dist/quill.js"></script>

<!-- 页面交互脚本 -->
<script>
  // 初始化富文本编辑器
  const quill = new Quill('#editor', {
    theme: 'snow',
    modules: {
      toolbar: [
        [{ 'header': [1, 2, 3, false] }],
        ['bold', 'italic', 'underline', 'strike'],
        [{ 'color': [] }, { 'background': [] }],
        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
        ['link', 'image', 'video'],
        ['clean']
      ]
    },
    placeholder: '请输入帖子内容...'
  });

  // 设置编辑器初始内容
  quill.setContents([
    { insert: 'Bootstrap 5是最流行的前端框架之一，它提供了一套完整的工具集，可以帮助开发者快速构建响应式网站。本文将介绍如何使用Bootstrap 5的基本组件和布局系统。\n', attributes: { align: null } },
    { insert: '\n', attributes: { header: 2 } },
    { insert: '1. 安装Bootstrap 5\n', attributes: { header: 3 } },
    { insert: '可以通过CDN快速引入Bootstrap 5：\n' },
    { insert: '<!-- CSS -->\n<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">\n\n<!-- JavaScript -->\n<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"><\/script>\n', attributes: { 'code-block': true } },
    { insert: '\n2. 使用网格系统\n', attributes: { header: 3 } },
    { insert: 'Bootstrap的网格系统基于12列布局，可以轻松创建响应式设计：\n' },
    { insert: '<div class="container">\n  <div class="row">\n    <div class="col-md-8">主内容</div>\n    <div class="col-md-4">侧边栏</div>\n  </div>\n</div>\n', attributes: { 'code-block': true } },
    { insert: '\n3. 常用组件\n', attributes: { header: 3 } },
    { insert: 'Bootstrap提供了丰富的组件，如导航栏、卡片、模态框等，可以直接使用。\n' }
  ]);

  // 标签功能
  document.getElementById('tagInput').addEventListener('keydown', function(e) {
    if (e.key === 'Enter') {
      e.preventDefault();
      const tag = this.value.trim();
      if (tag && !tagExists(tag)) {
        addTag(tag);
        this.value = '';
      }
    } else if (e.key === 'Backspace' && this.value === '') {
      const tags = document.querySelectorAll('.tag-item');
      if (tags.length > 0) {
        tags[tags.length - 1].remove();
      }
    }
  });

  document.getElementById('tagInput').addEventListener('input', function() {
    const input = this.value.trim();
    const suggestions = document.getElementById('tagSuggestions');

    if (input) {
      // 这里应该有更复杂的标签匹配逻辑
      suggestions.style.display = 'block';
    } else {
      suggestions.style.display = 'none';
    }
  });

  function tagExists(tag) {
    const tags = document.querySelectorAll('.tag-item');
    return Array.from(tags).some(el => el.textContent.trim() === tag);
  }

  function addTag(tag) {
    const tagList = document.getElementById('tagList');
    const tagItem = document.createElement('div');
    tagItem.className = 'tag-item';
    tagItem.innerHTML = `
                ${tag}
                <span class="tag-remove" onclick="removeTag(this)">&times;</span>
            `;
    tagList.appendChild(tagItem);
  }

  function removeTag(element) {
    element.parentElement.remove();
  }

  function selectTag(tag) {
    if (!tagExists(tag)) {
      addTag(tag);
    }
    document.getElementById('tagInput').value = '';
    document.getElementById('tagSuggestions').style.display = 'none';
  }



  // 表单提交
  document.getElementById('editPostForm').addEventListener('submit', function(e) {
    e.preventDefault();

    // 获取编辑器内容
    const content = quill.root.innerHTML;
    document.getElementById('postContent').value = content;

    // 获取所有标签
    const tags = Array.from(document.querySelectorAll('.tag-item')).map(el =>
            el.textContent.replace('×', '').trim()
    );

    // 这里应该有AJAX提交表单数据
    console.log('标题:', document.getElementById('postTitle').value);
    console.log('标签:', tags);
    console.log('内容:', content);

    // 模拟成功响应
    alert('帖子修改成功！');
    // window.location.href = 'post.jsp?id=123';
  });

  // 删除帖子
  const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));

  document.getElementById('deleteBtn').addEventListener('click', function() {
    deleteModal.show();

    console.log("删除帖子")
  });

  document.getElementById('confirmDelete').addEventListener('click', function() {
    // 这里应该有AJAX请求删除帖子
    deleteModal.hide();
    alert('帖子已删除');
    // window.location.href = 'index.jsp';
  });

</script>

</body>
</html>
